<template>
    <el-table ref="tableRef" row-key="date" :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" style="width: 100%" :default-sort="{ prop: 'profit', order: 'descending' }"
    @sort-change="sortChange">
        <el-table-column prop="placeid" label="场地编号" width="160" />
        <el-table-column prop="s_name" label="商家" width="160" />
        <el-table-column prop="originPrice" label="单价" width="160"/>
        <el-table-column prop="totalnum" label="销量" width="160"/>
        <!-- 收入 -->
        <el-table-column label="收入" width="160">
                <template #default="scope">
                    {{scope.row.originPrice * scope.row.totalnum}}
                </template>
        </el-table-column>
        <el-table-column prop="p_price" label="支出" width="200"/>
        <!-- 利润 -->
        <el-table-column label="利润">
                <template #default="scope">
                    {{scope.row.originPrice * scope.row.totalnum - scope.row.p_price}}
                </template>
        </el-table-column>
        <!-- 盈利 -->
        <el-table-column label="盈利">
                <template #default="scope">
                    <el-tag 
                    v-if="scope.row.originPrice * scope.row.totalnum - scope.row.p_price > 0"
                    class="ml-2"
                    type="success"
                    >是</el-tag>
                    <el-tag 
                    v-else
                    class="ml-2"
                    type="danger"
                    >否</el-tag>
                </template>
            </el-table-column>
    </el-table>
    <!-- 设置分页导航 -->
    <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    <!-- 汇总 -->
    <el-row :gutter="12">
            <el-col :span="8">
                <el-card shadow="hover"> 总支出：{{paid}} </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover"> 总收入：{{income}} </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover"> 利润：{{profit}} </el-card>
            </el-col>
    </el-row>
</template>
    
<script lang="ts" setup>
    import { ref,onMounted, reactive,computed} from "vue";
    import api from "../../util/api"
    import axios from 'axios';
    import link from "../../util/api";
    // 总支出
    const paid = ref()
    // 总收入
    const income = ref()
    // 利润
    const profit = ref()
    // 总数据表
    const tableData = ref([])
    // 分页
    // 设置需要的参数与方法
    const currentPage4 = ref(1)
    const pageSize4 = ref(10)
    // 修改下面得方法
    const handleSizeChange = (val: number) => {
    //一页显示多少条
        pageSize4.value = val;
    }
    const handleCurrentChange = (val: number) => {
    //页码更改方法
        currentPage4.value = val;
    }
    // axios请求
    let newarr = ref([])
    onMounted(() => {
        link(`/getMoney`, "GET").then((res: any) => {
            console.log(res);
            newarr.value = res.data
            newarr.value.forEach((item:any) => {
                let allnum = 0;
                item.userOrders.forEach((item2:any)=>{
                    allnum += parseInt(item2.s_num)
                })
                item.totalnum = allnum as number
            });
            console.log('清洗后的数据',newarr.value);
            tableData.value = newarr.value
            //总支出 
            let allpaid = 0
            // 总收入
            let allincome = 0
            newarr.value.forEach((item:any)=>{
                allpaid += item.p_price
                allincome += item.totalnum*item.originPrice
            })
            paid.value = allpaid
            income.value = allincome
            profit.value = allincome - allpaid
        })
    })
    
    </script>
    <style lang="scss" scope>
        .el-table{
            margin-bottom: 20px;
        }
        .el-row{
            margin-top: 10px;
        }
    </style>